<wicket:panel>
	<div class="pack-list card no-autofocus">
		<div class="card-body">
			<div class="d-flex mb-4">
				<form wicket:id="query" class="clearable-wrapper flex-grow-1">
					<div class="input-group">
						<input wicket:id="input" spellcheck="false" autocomplete="off" class="form-control" t:placeholder="Query/order packages">
						<span class="input-group-append">
							<button wicket:id="submit" type="submit" class="btn btn-icon btn-outline-secondary" t:data-tippy-content="Query"><wicket:svg href="magnify" class="icon"></wicket:svg></button>
						</span>
					</div>
				</form>
			</div>
			<div class="mb-4">
				<a wicket:id="showSavedQueries" class="show-saved-queries text-gray d-inline-block mb-2 mr-4 text-nowrap">
					<wicket:svg href="eye" class="icon"></wicket:svg> <wicket:t>Show Saved Queries</wicket:t>
				</a>
				<a wicket:id="saveQuery" class="save-query text-gray d-inline-block mb-2 mr-4 text-nowrap">
					<wicket:svg href="save" class="icon"></wicket:svg> <wicket:t>Save Query</wicket:t>
				</a>
				<a wicket:id="filter" class="filter text-gray mr-4 mb-2 d-inline-block text-nowrap">
					<wicket:svg href="filter" class="icon"></wicket:svg> <wicket:t>Filter</wicket:t>
				</a>
				<a wicket:id="orderBy" class="order-by text-gray mr-4 mb-2 d-inline-block text-nowrap">
					<wicket:svg href="sort" class="icon"></wicket:svg> <wicket:t>Order By</wicket:t>
				</a>
				<a wicket:id="operations" class="operations text-gray mr-4 mb-2 d-inline-block text-nowrap">
					<wicket:svg href="ellipsis-circle" class="icon"></wicket:svg> <wicket:t>Operations</wicket:t>
				</a>
				<a wicket:id="help" class="help text-gray mr-4 mb-2 d-inline-block text-nowrap">
					<wicket:svg href="question-circle" class="icon"></wicket:svg> <wicket:t>How to Publish</wicket:t>
				</a>
				<span wicket:id="count" class="float-right text-gray"></span>
			</div>
			<div wicket:id="body">
				<div wicket:id="feedback"></div>
				<table wicket:id="packs" class="table"></table>
				<div wicket:id="help"></div>
			</div>
		</div>
	</div>
	<wicket:fragment wicket:id="packFrag">
		<a wicket:id="link" class="text-nowrap mr-2">
			<svg wicket:id="icon" class="icon mr-1"></svg>
			<span wicket:id="label"></span>
		</a>
		<span wicket:id="labels"></span>
	</wicket:fragment>
	<wicket:fragment wicket:id="helpFrag">
		<div class="alert alert-notice alert-light-info"><wicket:t>Follow below instructions to publish packages into this project</wicket:t></div>
		<ul wicket:id="tabs" class="tabs nav nav-tabs nav-tabs-line nav-bold mb-4"></ul>
		<div wicket:id="content"></div>
	</wicket:fragment>
</wicket:panel>